import Taro, { useDidShow } from '@tarojs/taro';
import { useState } from 'react';
import RecordItem from '../../components/punchRecordItem';
import { Cell } from '@nutui/nutui-react-taro';
import { Api } from '../../api'



export default function VacateRecord() {
  const [record, setRecord] = useState<any[]>([]);
  
  useDidShow(() => {
    // 从缓存中获取token, token不存在则跳转到登录页
    const token = Taro.getStorageSync('token');
    if (!token) {
      Taro.reLaunch({ url: '/pages/login/index' });
      return;
    }

    Api.getPunchs(Number(token.id)).then((res: any) => {
      console.log('getApprovals: ', res);
      if (res.success) {
        setRecord(res.data.data);
      }
    });
  });

  return (
    <div className="page-container">
      {record.map((item) => (
        <Cell key={item.id}>
          <RecordItem record={item} />
        </Cell>
      ))}
    </div>
  );
}




/**
 * 
 * 这段代码是一个名为 VacateRecord 的函数组件，功能是展示请假申请记录列表。让我逐行解释它的功能：

定义了一个名为 VacateRecord 的函数组件。

使用了 useState 钩子函数来定义一个名为 record 的状态变量，初始值为空数组。record 用于存储请假申请记录的数据。

使用了 useDidShow 钩子函数，它是 Taro 提供的一个生命周期钩子，当页面显示时会触发该钩子函数的回调函数。

在 useDidShow 的回调函数中，首先从缓存中获取 token，如果 token 不存在，则使用 Taro 的 reLaunch 方法跳转到登录页，并返回。

如果 token 存在，调用 Api 的 getApprovals 方法，并传入 token.id 参数。该方法用于获取请假申请记录的数据。

在 getApprovals 的回调函数中，如果请求成功 (res.success 为 true)，则将返回的数据 (res.data.data) 设置到 record 状态变量中。

返回一个 JSX 结构作为组件的渲染结果。

使用 div 元素作为页面容器，并设置样式类名为 "page-container"。

使用 record.map 方法遍历 record 数组，对每个元素渲染一个 Cell 组件，并设置 key 属性为 item.id。

在 Cell 组件内部，使用 RecordItem 组件来展示每条请假记录的详细信息。RecordItem 组件需要传入 record 对象作为参数。

以上就是这段代码的功能和逻辑解释。它通过 Taro 和自定义的 API 方法获取请假申请记录的数据，并将数据渲染到页面上。同时，它还处理了缓存中的 token，如果 token 不存在，则跳转到登录页。
 */